<template>
    <div>
        <!--页面路径-->
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>产品管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{ this.$route.params.name }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!--页面内容-->
        <div style="background:#fff;margin-top:20px;padding:20px 10px;">

            <div>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="SPU信息" name="first">
                        <div>
                            <el-row>
                                <el-col :span="4">产品编号：</el-col>
                                <el-col :span="20">
                                    <el-input v-model="spu.code" />
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4">产品名称：</el-col>
                                <el-col :span="20">
                                    <el-input v-model="spu.title" />
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4">产品分类：</el-col>
                                <el-col :span="20">
                                    <el-cascader v-model="spu.categoryId" :props="{ label: 'name', value: 'id' }"
                                        :options="categoryDataOptions" @change="handleChange"></el-cascader>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4">产品品牌：</el-col>
                                <el-col :span="20">
                                    <el-select v-model="spu.brandId" placeholder="请选择">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4">产品介绍：</el-col>
                                <el-col :span="20">
                                    <el-input v-model="spu.description" />
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="SKU信息" name="second">
                        <div>
                            <el-button @click="eventAddSKURow">添加一行SKU</el-button>
                        </div>
                        <div>
                            <el-table :data="sku" style="width: 100%">
                                <el-table-column prop="name" label="sku的规格">
                                    <template slot-scope="a">
                                        <el-input v-model="a.row.specs"/>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="id" label="对应库存" width="180">
                                    <template slot-scope="a">
                                        <el-input v-model="a.row.stock"/>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="id" label="进货价格" width="200">
                                    <template slot-scope="a">
                                        <el-input v-model="a.row.inPrice"/>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="id" label="市场价格" width="200">
                                    <template slot-scope="a">
                                        <el-input v-model="a.row.marketPrice"/>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="id" label="销售价格" width="200">
                                    <template slot-scope="a">
                                        <el-input v-model="a.row.salePrice"/>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="address" label="对应图片" width="200">
                                    <template slot-scope="scope">
                                        <el-upload class="upload-demo" action="http://localhost:5068/sku/upload"
                                            multiple :limit="3" :on-success="(res)=>{eventUploadSuccess(res,scope.row)}">
                                            <el-button size="small" type="primary">点击上传</el-button>
                                        </el-upload>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <div style="text-align:right;">
                    <el-button @click="eventSubmitProduct">提交</el-button>
                </div>
            </div>
        </div>

    </div>
</template>


<script>
export default {
    data() {
        return {
            activeName: 'second',
            value: [],
            value2: '',
            categoryDataOptions: [],
            tableData: [
                { id: '1', name: '{颜色：红色，内存：512M}', sex: 'a' },
                { id: '2', name: '{颜色：红色，内存：512M}', sex: 'a' }
            ],
            //===================================//
            spu: {
                code: '',
                title: '',
                brandId: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
                categoryId: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
                description: ''
            },
            sku: [
                {
                    inPrice: 0,
                    marketPrice: 0,
                    salePrice: 0,
                    specs: "",
                    stock: 0,
                    imagePath: []
                },
                {
                    inPrice: 0,
                    marketPrice: 0,
                    salePrice: 0,
                    specs: "",
                    stock: 0,
                    imagePath: []
                }
            ]
        }
    },
    mounted() {
        this.onloadCategory()
    },
    methods: {

        //提交产品信息（spu、sku、图片、spec）
        eventSubmitProduct() {
            //let url = this.$baseUrl + '/sku'
            let data = {
                "brandId": this.spu.brandId,
                "categoryId": this.spu.categoryId,
                "description": this.spu.description,
                "skus": this.sku,
                "specs": [
                    {
                        "specName": "string",
                        "specValue": "string"
                    }
                ]
            }
            console.log(data)
            // this.$http.post(url, data).then(res => {
            //     console.log(res);
            // })
        },
        //上传成功的回调
        eventUploadSuccess(res,row){
            if(res.code == 200){
                let d = res.data
                row.imagePath.push(d[0])
            }
            console.log(this.sku);
        },
        //加载分类级联选择器数据
        onloadCategory() {
            let url = this.$baseUrl + '/category/recursion'
            this.$http.get(url).then(res => {
                if (res.data.code == 200) {
                    this.categoryDataOptions = res.data.data
                }
            })
        },

        //添加行事件
        eventAddSKURow() {
            this.tableData.push({ id: '', name: '', sex: '' })
        },
        //标签页的点击事件
        handleClick(tab, event) {
            console.log(tab, event);
        },
        //分类级联选择器的改变事件
        handleChange(value) {
            console.log(value);
        }
    },
}
</script>